<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目详情 - 开发部项目管理</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 所有页面保持相同的导航栏结构 -->

    <div class="container">
        <header>
            <h1>项目详情</h1>
            <div class="user-info">
                <span id="username-display">张三</span>
                个人信息
            </div>
        </header>

       <nav class="sidebar">
            <ul>
                <a href="index.html"><li class="active">项目总览</li></a>
                <a href="project-detal.html"> <li>基本信息文档列表</li></a>
               <a href="project-info.html"> <li>成员信息进度跟踪</li></a>
            </ul>
        </nav>

        <main class="content">
            <div class="project-switcher">
                <select id="project-select">
                    <option value="current">当前项目</option>
                    <option value="all">所有项目</option>
                </select>
            </div>

            <section class="project-info">
                <h2>项目基本信息</h2>
                <div class="info-grid">
                    <div>项目名称:</div>
                    <div>项目A</div>
                    <div>项目开始时间:</div>
                    <div>2023-01-01</div>
                    <div>项目结束时间:</div>
                    <div>2023-12-31</div>
                    <div>项目负责人:</div>
                    <div>张三</div>
                    <div>项目描述:</div>
                    <div>这是一个重要的开发项目，涉及多个模块的开发。</div>
                </div>
            </section>

            <section class="project-docs">
                <h2>文档管理功能</h2>
                <table>
                    <thead>
                        <tr>
                            <th>文档列表</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Api文档</td>
                            <td>
                                <button class="btn-upload">上传</button>
                                <button class="btn-delete">删除</button>
                                <button class="btn-edit">编辑</button>
                            </td>
                        </tr>
                        <tr>
                            <td>前端策划文档</td>
                            <td>
                                <button class="btn-upload">上传</button>
                                <button class="btn-delete">删除</button>
                                <button class="btn-edit">编辑</button>
                            </td>
                        </tr>
                        <tr>
                            <td>数据库文档</td>
                            <td>
                                <button class="btn-upload">上传</button>
                                <button class="btn-delete">删除</button>
                                <button class="btn-edit">编辑</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <section class="project-members">
                <h2>项目成员信息</h2>
                <table>
                    <thead>
                        <tr>
                            <th>成员信息</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>前端负责人</td>
                            <td>
                                <select>
                                    <option>李四</option>
                                    <option>王五</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>后端负责人</td>
                            <td>
                                <select>
                                    <option>赵六</option>
                                    <option>钱七</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <section class="gantt-chart">
                <h2>进度跟踪</h2>
                <div id="gantt-container"></div>
            </section>
        </main>
    </div>

<script src="project.js"></script>
    <script src="js/gantt.js"></script>
</body>
</html>